<template>
<div class="weui-tabbar">
  <router-link class="weui-tabbar__item" to="/index">
  	<i class="icon-tab icon-tab-1" @click="recode(1)"></i>
    <span class="weui-tabbar__label">赚积分</span>
  </router-link>
  <router-link class="weui-tabbar__item" to="/commision">
  	<i class="icon-tab icon-tab-6" @click="recode(6)"></i>
    <span class="weui-tabbar__label">返佣金</span>
  </router-link>
  <router-link class="weui-tabbar__item" to="/coupon">
  	<i class="icon-tab icon-tab-2" @click="recode(4)"></i>
    <span class="weui-tabbar__label">领优惠</span>
  </router-link>
  <!--<router-link class="weui-tabbar__item" to="/games">
  	<i class="icon-tab icon-tab-3" @click="recode(5)"></i>
    <span class="weui-tabbar__label">玩游戏</span>
  </router-link>-->
  <!--<router-link class="weui-tabbar__item" to="/store">
  	<i class="icon-tab icon-tab-4" @click="recode(2)"></i>
    <span class="weui-tabbar__label">积分商城</span>
  </router-link>-->
  <router-link class="weui-tabbar__item" to="/icenter">
  	<i class="icon-tab icon-tab-5" @click="recode(3)"><span v-if="showDct || integralState !== 0" class="weui-badge weui-badge_dot"></span></i>
    <span class="weui-tabbar__label">个人中心</span>
  </router-link>
</div>
</template>
<script>
import {creditRecordChkSubscribe, clickRecord} from 'src/service/getData'
import {cookie} from 'src/config/utils'
import {mapState, mapMutations} from 'vuex'
export default {
  data () {
    return {
      showDct: false
    }
  },
  computed: {
    ...mapState([
      'I9RIA', 'shareState', 'integralState'
    ])
  },
  mounted () {
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initData()
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_INTEGRAL' // 用户积分记录
    ]),
    initData () {
      // this.initSahreState()
      this.getRecordState()
    },
    initSahreState () { // 代言人状态初始化
      if (this.shareState || cookie('shareState')) {
        this.showDct = false
      } else {
        this.showDct = true
      }
    },
    async getRecordState () { // 积分记录
      let res = await creditRecordChkSubscribe()
      if (res.code !== 0) {
        return
      }
      this.RECORD_INTEGRAL(res.data.is_update)
    },
    recode (type) {
      clickRecord(type)
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style scoped>
.weui-tabbar{position:fixed; left:0; bottom:0; background:#fff; border-top:transparent; margin-left:-.005rem; box-shadow:0 -2px 2px rgba(0,0,0,.05)}
.weui-tabbar:before{border-top-color:#f0f0f0;}
.weui-tabbar__label{line-height:.14rem; font-size:.11rem; color:#a1a1a1;position: absolute; width: 100%; left: 0; bottom: 5px;}
.weui-tabbar__item{position: relative;padding: 5px 0;}
.router-link-active .weui-tabbar__label{color:#ff602a;}
.icon-tab{position:relative; width:.49rem; height:.49rem;display:inline-block; vertical-align:middle; background-repeat:no-repeat; object-position:50% 50%; background-size:100%;}
.icon-tab-1{background-image:url(../../assets/imgs/tab/1-0.png);}
.icon-tab-2{background-image:url(../../assets/imgs/tab/2-0.png);}
/*.icon-tab-3{background-image:url(../../assets/imgs/tab/3-0.png);}
.icon-tab-4{background-image:url(../../assets/imgs/tab/4-0.png);}*/
.icon-tab-5{background-image:url(../../assets/imgs/tab/5-0.png);}
.icon-tab-6{background-image:url(../../assets/imgs/tab/6-0.png);}
.router-link-active .icon-tab-1{background-image:url(../../assets/imgs/tab/1-1.png);}
.router-link-active .icon-tab-2{background-image:url(../../assets/imgs/tab/2-1.png);}
/*.router-link-active .icon-tab-3{background-image:url(../../assets/imgs/tab/3-1.png);}
.router-link-active .icon-tab-4{background-image:url(../../assets/imgs/tab/4-1.png);}*/
.router-link-active .icon-tab-5{background-image:url(../../assets/imgs/tab/5-1.png);}
.router-link-active .icon-tab-6{background-image:url(../../assets/imgs/tab/6-1.png);}
.weui-tabbar__item .weui-badge_dot{position:absolute; left:50%; top:50%; margin-left:0; margin-top:-18px; padding:4px; border-radius:50%;}
@media only screen and (width: 375px) and (min-height: 690px){
    .weui-tabbar {
        padding-bottom: 0.34rem;
    }
}
</style>
